<template>
  <div id="app">
    <top-bar/>
    <div class="head_banner">
      <img src="@/assets/outPark/banner.jpg">
    </div>
    <div class="enter_main" v-show="totalFloor.length>0">
      <div class="current_floor">
        当前显示{{ floorIndex }}
      </div>
      <div class="enter_car_enter">
        <div class="floor_area">
          <div v-for="(item,index) in totalFloor" :key="index" class="floor_button" @click="toFloorDetail(item,index)">
            <el-button type="primary" disabled>{{ item.name }}
            </el-button>
          </div>
        </div>
        <div class="spot_area">
          <div class="spot_item" v-for="(item,index) in spotInfo" :key="index" @click="goToOut(item,index)">
            <img src="@/assets/enterPark/spotDisable.png" v-show="item.isHaveUser=='1'"
                 :class="['spot_disable',spotId==item.code?'current_spot':'']">
            <img src="@/assets/enterPark/spotEmpty.png" v-show="item.isHaveUser=='0'" class="spot_empty">
            <span class="spot_code">{{ item.code }}</span>
          </div>
        </div>
      </div>
      <el-dialog :visible.sync="isOutPark" :show-close="false">
        <el-select v-model="chooseFloorId" placeholder="请选择您想从哪一楼出停车场">
          <el-option :label="item.name" :value="item.id" v-for="(item,index) in totalFloor" :key="index"></el-option>
        </el-select>
        <el-button type="success" @click="confirmFloor">确认选择</el-button>
      </el-dialog>
    </div>
  </div>
</template>
<script>

import {defineComponent} from "vue";
import topBar from "../components/topBar.vue";

export default {
  data() {
    return {
      floorIndex: '',
      totalFloor: [],
      spotInfo: [],
      warehousingTime: '',
      spotId: '',
      floorId: '',
      chooseId: '',
      chooseItem: '',
      chooseIndex: '',
      chooseFloorId: '',
      isOutPark: false,
    }
  },
  mounted() {
    this.queryFloorNum()

  },
  methods: {
    queryFloorNum(onsucc) {
      let that = this
      this.$axios.get('system/floor/list?pageNum=1&pageSize=10', null).then((res) => {
        if (res.data.code == 200) {
          console.log(res)
          that.totalFloor = res.data.rows
          that.totalFloor = that.totalFloor.reverse()
          that.queryUseSpot()
          // firstFloor.forEach((item, index) => {
          //   if (item.isLock == "Y") {
          //     that.toFloorDetail(item, index)
          //     return
          //   }
          // })
        } else {
          this.$notify.error({
            title: '错误',
            message: '获取楼层信息失败！'
          });
        }
      }).catch((error) => {
        this.$notify.error({
          title: '错误',
          message: '获取楼层信息失败！'
        });
      });
    },
    queryUseSpot() {
      let that = this
      this.$axios.get('/system/userSpotInfo/getUserSpotListWithUser', null).then((res) => {
        if (res.data.code == 200) {
          console.log(res)
          that.floorId = res.data.data.floorId
          that.spotId = res.data.data.spotCode
          that.totalFloor.forEach((item, index) => {
            if (item.id == that.floorId) {
              that.toFloorDetail(item.id, item, index)
            }
          })
        } else {
          this.$notify.error({
            title: '错误',
            message: '获取楼层信息失败！'
          });
        }
      }).catch((error) => {
        this.$notify.error({
          title: '错误',
          message: '获取楼层信息失败！'
        });
      });
    },
    toFloorDetail(floorId, item, index) {
      let that = this
      that.chooseItem = item
      that.chooseIndex = index
      this.floorIndex = item.name
      if (item.isLock == 'N') {
        this.$notify.error({
          title: '提示',
          message: '当前楼层已锁定，暂不可用'
        });
      } else {
        this.$axios.get('system/floor/' + floorId, null).then((res) => {
          if (res.data.code == 200) {
            console.log(res)
            that.spotInfo = res.data.data.sysParkSpotList
          } else {
            this.$notify.error({
              title: '错误',
              message: '获取楼层详细信息失败！'
            });
          }
        }).catch((error) => {
          this.$notify.error({
            title: '错误',
            message: '获取楼层详细信息失败！'
          });
        });
      }
    },
    goToOut(item, index) {
      if (this.spotId != item.code) {
        this.$notify.error({
          title: '提示',
          message: '您不可操作当前车位！'
        });
      } else {
        this.isOutPark = true
      }
    },
    confirmFloor() {
      let that = this
      this.$axios.get('/system/floor/getPayMoney/' + this.chooseFloorId, null).then((res) => {
        if (res.data.code == 200) {
          that.$confirm('您预估最多需要等待'+res.data.data.maxTime+'分钟，支付'+res.data.data.price+'元', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: ' info'
          }).then(() => {
            that.submitOutPark(that.chooseFloorId,res.data.data.maxTime,res.data.data.price)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消出库'
            });
          });
        } else {
          this.$notify.error({
            title: '错误',
            message: '获取出库详细信息失败！'
          });
        }
      }).catch((error) => {
        this.$notify.error({
          title: '错误',
          message: '获取出库详细信息失败！'
        });
      });
    },
    submitOutPark(floorId,maxTime,price){
      let that = this
      this.$axios.get('/system/floor/savePayMoney/' + floorId+'/'+maxTime+'/'+price, null).then((res) => {
        if (res.data.code == 200) {
          console.log(res)
          that.isOutPark = false
          this.$alert('出库成功', '成功', {
            confirmButtonText: '确定',
            callback: action => {
              that.$router.push({
                path:'/userCenter'
              })
            }
          });
        } else {
          this.$notify.error({
            title: '错误',
            message: '获取出库详细信息失败！'
          });
        }
      }).catch((error) => {
        this.$notify.error({
          title: '错误',
          message: '获取出库详细信息失败！'
        });
      });
    }
  },
  components: {topBar}
}

</script>
<style scoped>
.head_banner img {
  width: 100vw;
  height: 50vh;
}

.floor_area {
  padding: 30px;
  width: 30vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.floor_button {
  margin-bottom: 20px;
}

.enter_main {
  background-color: aliceblue;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
}

.enter_car_enter {
  display: flex;
}

.floor_number {
  position: absolute;
}

.el-button {
  width: 200px;
}

.spot_area {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
}

.spot_item {
  width: 200px;
  height: 300px;
  position: relative;
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.spot_item img {
  width: 200px;
}

.current_floor {
  display: flex;
  justify-content: center;
  font-size: 30px;
  color: #8a8a8a;
  font-weight: bold;
}

.spot_empty {
  //cursor: pointer;
}

.el-input {
  width: 100%;
}

.current_spot {
  cursor: pointer;
  animation: flash 1s infinite;
}

@keyframes flash {
  from {
    width: 190px;
  }
  to {
    width: 210px;
  }
}

.el-select {
  width: 80%;
}
</style>
